<template>
  <div class="analysis-container">
    <div class="header">
      <div class="back-btn" @click="router.back()">
        <span class="icon">←</span> 返回
      </div>
      <h1>班级行为分析</h1>
    </div>

    <!-- 总体统计卡片 -->
    <div class="stat-cards">
      <div v-for="stat in stats" :key="stat.id" class="stat-card">
        <div class="stat-icon" :style="{ background: stat.color }">{{ stat.icon }}</div>
        <div class="stat-info">
          <h3>{{ stat.title }}</h3>
          <div class="stat-value">{{ stat.value }}</div>
          <div class="stat-trend" :class="stat.trend">
            {{ stat.trend === 'up' ? '↑' : '↓' }} {{ stat.change }}%
          </div>
        </div>
      </div>
    </div>

    <div class="dashboard">
      <!-- 课堂参与度 -->
      <div class="chart-card">
        <h3>课堂参与度分析</h3>
        <v-chart class="chart" :option="participationOption" />
      </div>

      <!-- 学习时间分布 -->
      <div class="chart-card">
        <h3>学习时间分布</h3>
        <v-chart class="chart" :option="timeDistOption" />
      </div>

      <!-- 互动行为分析 -->
      <div class="chart-card">
        <h3>互动行为分析</h3>
        <v-chart class="chart" :option="interactionOption" />
      </div>

      <!-- 专注度分析 -->
      <div class="chart-card">
        <h3>专注度分析</h3>
        <v-chart class="chart" :option="focusOption" />
      </div>
    </div>

    <!-- AI 行为建议 -->
    <div class="recommendations">
      <h2>AI 行为建议</h2>
      <div class="recommendation-list">
        <div v-for="(rec, index) in recommendations" 
             :key="index" 
             class="recommendation-card">
          <div class="rec-icon">💡</div>
          <div class="rec-content">
            <h4>{{ rec.title }}</h4>
            <p>{{ rec.content }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import VChart from 'vue-echarts'

const router = useRouter()

// 统计卡片数据
const stats = ref([
  {
    id: 1,
    title: '课堂参与度',
    value: '88%',
    change: 5.2,
    trend: 'up',
    icon: '🙋',
    color: '#1890ff'
  },
  {
    id: 2,
    title: '平均专注时长',
    value: '42分钟',
    change: 3.5,
    trend: 'up',
    icon: '🎯',
    color: '#52c41a'
  },
  {
    id: 3,
    title: '互动频率',
    value: '8.5次/课',
    change: 2.8,
    trend: 'up',
    icon: '💬',
    color: '#722ed1'
  },
  {
    id: 4,
    title: '课堂活跃度',
    value: '85%',
    change: 1.5,
    trend: 'down',
    icon: '📈',
    color: '#faad14'
  }
])

// 课堂参与度分析
const participationOption = ref({
  tooltip: { trigger: 'axis' },
  xAxis: {
    type: 'category',
    data: ['回答问题', '小组讨论', '课堂练习', '主动提问', '课后作业']
  },
  yAxis: {
    type: 'value',
    max: 100
  },
  series: [{
    data: [85, 92, 88, 72, 95],
    type: 'bar',
    barWidth: '40%',
    itemStyle: {
      color: function(params) {
        const colors = ['#1890ff', '#52c41a', '#faad14', '#722ed1', '#13c2c2']
        return colors[params.dataIndex]
      }
    }
  }]
})

// 学习时间分布
const timeDistOption = ref({
  tooltip: {
    trigger: 'item'
  },
  series: [{
    type: 'pie',
    radius: ['50%', '70%'],
    data: [
      { value: 45, name: '上午学习', itemStyle: { color: '#1890ff' } },
      { value: 30, name: '下午学习', itemStyle: { color: '#52c41a' } },
      { value: 15, name: '晚自习', itemStyle: { color: '#722ed1' } },
      { value: 10, name: '课余时间', itemStyle: { color: '#faad14' } }
    ],
    label: {
      formatter: '{b}: {d}%'
    }
  }]
})

// 互动行为分析
const interactionOption = ref({
  radar: {
    indicator: [
      { name: '师生互动', max: 100 },
      { name: '生生互动', max: 100 },
      { name: '课堂发言', max: 100 },
      { name: '小组合作', max: 100 },
      { name: '在线讨论', max: 100 }
    ]
  },
  series: [{
    type: 'radar',
    data: [{
      value: [85, 78, 72, 88, 82],
      name: '班级平均水平',
      areaStyle: {
        color: 'rgba(24, 144, 255, 0.2)'
      },
      lineStyle: {
        color: '#1890ff'
      }
    }]
  }]
})

// 专注度分析
const focusOption = ref({
  xAxis: {
    type: 'category',
    data: ['8:00', '9:00', '10:00', '11:00', '14:00', '15:00', '16:00']
  },
  yAxis: {
    type: 'value',
    max: 100
  },
  series: [{
    data: [92, 88, 82, 75, 85, 80, 78],
    type: 'line',
    smooth: true,
    lineStyle: {
      color: '#52c41a'
    },
    areaStyle: {
      color: 'rgba(82, 196, 26, 0.2)'
    }
  }]
})

// AI行为建议
const recommendations = ref([
  {
    title: '课堂参与优化',
    content: '建议在10:00-11:00时段增加互动环节，提高学生参与度。'
  },
  {
    title: '专注力提升',
    content: '下午课程建议每30分钟安排一次简短的课堂活动，帮助恢复注意力。'
  },
  {
    title: '互动模式建议',
    content: '小组讨论效果最佳，建议增加小组合作学习的比例。'
  },
  {
    title: '学习时间分配',
    content: '建议适当增加课余时间的学习比例，培养自主学习能力。'
  }
])
</script>

<style scoped>
/* 使用与学情分析相同的样式 */
.analysis-container {
  padding: 30px;
}

.header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}

.back-btn {
  padding: 10px 20px;
  background: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.dashboard {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.chart-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.chart {
  height: 300px;
}

.recommendations {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.recommendation-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.recommendation-card {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  gap: 15px;
}

.trend.up { color: #52c41a; }
.trend.down { color: #f5222d; }
</style> 